<template>
  <a-modal v-model="visible" title="面试详情" :footer="null" @cancel="$emit('update:visible', false)" width="520px">
    <div class="interviewMsg-modal">
      <div class="m-box">
        <a-list-item-meta :description="description">
          <div slot="title" class="tit">
            <div>{{ info.name }}</div>
          </div>
          <a-avatar v-if="info.avatar" slot="avatar" :src="info.avatar" />
          <a-avatar v-if="!info.avatar && info.gender === 1" slot="avatar" :src="n1" />
          <a-avatar v-if="!info.avatar && info.gender === 2" slot="avatar" :src="n2" />
        </a-list-item-meta>
        <div v-if="interviewId">
          <div class="m-status" v-if="status <= '2'">等待面试</div>
          <div class="m-status" v-else-if="status == '9'">面试已取消</div>
          <div class="m-status" v-else>已面试</div>
        </div>
      </div>
      <div class="m-content">
        <div>
          <span>面试方式：</span> <span v-if="interviewId">{{ interviewType === 1 ? "现场面试" : "电话面试" }}</span
          ><br />
        </div>
        <div>
          <span>面试时间：</span>
          <span v-if="interviewId">{{ interviewDate ? moment(interviewDate).format("YYYY-MM-DD HH:mm") : "" }} </span><br />
        </div>
        <div>
          <span>面试人：</span> <span v-if="interviewId">{{ interviewPersonName }}</span
          ><br />
        </div>
        <div>
          <span>面试地点：</span> <span v-if="interviewId">{{ interviewLocation }}</span
          ><br />
        </div>
        <div>
          <span>备注：</span> <span v-if="interviewId">{{ remarks }}</span
          ><br />
        </div>
      </div>
      <div class="m-content" v-if="status >= 3 && status != 9">
        <div>
          <span>面试评价：</span><br />
          <span v-if="interviewId">{{ interviewEvaluation }}</span>
        </div>
      </div>
      <div class="interviewMsg-btn" v-if="interviewId && status == 2">
        <a-button @click="onCancel" class="mr12">取消面试</a-button>
        <a-button @click="onShare" class="mr12">面试二维码</a-button>
        <a-button type="primary" @click="handleOk"> 评价 </a-button>
      </div>
      <div class="interviewMsg-btn" v-if="interviewId && status != 2">
        <a-button @click="onShare">面试二维码</a-button>
      </div>
    </div>
    <delModal :visible.sync="delVisible" title="确定取消面试吗？" okText="暂不取消" cancelText="取消面试" @onCancel="onCancelDel" />
    <share :visible.sync="shareVisible" :qrCodeUrlV="info.qrCodeUrlV" />
  </a-modal>
</template>

<script>
import moment from "moment";
import delModal from "../../component/delModal";
import share from "../../component/share";
import { getNoSiteId } from "../api";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    interviewId: {
      type: String,
      default: ""
    },
    status: {
      type: String,
      default: ""
    },
    info: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    visible(v) {
      if (v) this.onGetNoSiteId();
    }
  },
  computed: {
    description() {
      let v = "";
      if (this.info.address) {
        v = this.info.address;
      }
      if (this.recruitInfoName) {
        v = this.recruitInfoName;
      }
      if (this.info.address && this.recruitInfoName) {
        v = this.info.address + "/" + this.recruitInfoName;
      }
      return v;
    }
  },
  components: { delModal, share },
  data() {
    return {
      form: this.$form.createForm(this, {}),
      interviewType: "",
      interviewPersonName: "",
      interviewDate: "",
      recruitInfoName: "",
      interviewLocation: "",
      remarks: "",
      interviewEvaluation: "",
      id: "",
      n1: require("@/assets/recruitment/n.png"),
      n2: require("@/assets/recruitment/n2.png"),
      delVisible: false,
      shareVisible: false
    };
  },
  methods: {
    moment,
    async onGetNoSiteId() {
      try {
        const v = `/recruit2/api/v1/interviews/getInterviewInfo/${this.interviewId}`;
        const { data } = await getNoSiteId(v);
        if (!this.interviewId) return false;
        this.interviewType = data.interviewType;
        this.interviewPersonName = data.interviewPersonName;
        this.interviewDate = data.interviewDate;
        this.recruitInfoName = data.recruitInfoName;
        this.interviewLocation = data.interviewLocation;
        this.remarks = data.remarks;
        this.interviewEvaluation = data.interviewEvaluation;
        this.id = data.deliverRecordId;
      } catch (err) {
        console.log("error log --> ", err);
      }
    },

    handleOk() {
      this.$emit("update:visible", false);
      this.$emit("onEvaluate", this.id);
    },
    onCancel() {
      this.delVisible = true;
    },
    onCancelDel() {
      this.$emit("update:visible", false);
      this.$emit("onCloseInterview");
    },
    onShare() {
      this.shareVisible = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.interviewMsg-modal {
  .m-box {
    position: relative;
    .tit {
      display: flex;
    }
    .m-status {
      position: absolute;
      top: 10px;
      right: 0;
      color: #767885;
    }
    .m-r {
      width: 46px;
      height: 18px;
      line-height: 18px;
      border-radius: 2px;
      border: 1px solid #4686ff;
      color: #4686ff;
      text-align: center;
      font-size: 10px;
      margin-top: 2px;
      margin-left: 8px;
    }
  }
  .m-content {
    width: 100%;
    // min-height: 198px;
    padding: 24px;
    margin-top: 24px;
    background: #faf9f9;
    border-radius: 4px;
    div {
      margin-bottom: 10px;
      span {
        color: #767885;
      }
    }
  }
  .interviewMsg-btn {
    margin: 32px 0 -24px -24px;
    padding-top: 10px;
    padding-right: 24px;
    text-align: right;
    width: 520px;
    height: 56px;
    border-top: 1px solid #e8e8e8;
  }
}
</style>
